<template>
  <el-dialog
    title="社区人员进出统计"
    :visible.sync="dialogVisible"
    :modal="false"
    width="70%"
    :before-close="handleClose"
  >
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column v-for="(item, index) in option" :key="index" :prop="item.prop" :label="item.label"> </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    option: {
        type: Array,
        default: () => [],
    },
    dialogVisible: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
    };
  },
  methods: {
    handleClose() {
    //   this.dialogVisible = false;
      this.$emit('handleClose')
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog {
  background: rgba(2, 18, 29, 0.76);
}
/deep/.el-dialog__header {
  position: relative;
  font-size: 0.24rem;
  height: 0.4rem;
  .el-dialog__title {
    color: #fff !important;
    display: inline-block;
    position: relative;
    text-indent: 0.3rem;
    font-size: 0.3rem;
    &::after {
      position: absolute;
      top: 0.05rem;
      left: 0;
      content: "";
      display: inline-block;
      width: 0.14rem;
      height: 0.14rem;
      border: 0.02rem solid #65beff;
      border-radius: 50%;
      opacity: 1;
    }
  }
  &::after {
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    height: 0.1rem;
    width: 100%;
    content: "";
    display: inline-block;
    background: url("../assets/person/title_bottom.png") no-repeat;
    background-size: 100% 100%;
  }
}
/deep/.el-table th.el-table__cell {
  background: rgba(73, 75, 75, 0.55);
}
/deep/.el-table tr {
  background: transparent;
  border-bottom: none;
  color: #fff;
}
/deep/.el-table {
  background: transparent;
}
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: rgba(111, 233, 255, 0.2);
  color: #fff;
  border-bottom: none;
}
/deep/.el-table td.el-table__cell,
/deep/.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
</style>